<template>
  <xh-pages>
    <view class="pages-container">
      <view class="withdrawal-container">
        <view class="title">可提现金额</view>
        <view class="money">￥{{ user.amount }}</view>
      </view>
      <view class="withdrawal-form">
        <view class="title">提现金额</view>
        <input class="w-input" v-model="formData.money" :placeholder="`可提现金额：￥${user.amount}`" />
        <!-- <view class="withdrawal-type">
          <view class="item">提现至</view>
          <view class="item">微信零钱</view>
        </view> -->
        <view class="withdrawal-desc" v-if="siteInfo.withdrawal_desc.length">
          <view class="title">提现说明</view>
          <view class="withdrawal-list">
            <view class="item" v-for="(item, index) in siteInfo.withdrawal_desc" :key="index">
              {{ index + 1 }}. {{ item }}
            </view>
          </view>
        </view>
        <view class="withdrawal-button">
          <button class="w-button" @tap="hanldSubmit">确认提现</button>
        </view>
      </view>
      <view class="bill-container">
        <view class="bill-title">
          <view class="title">提现记录</view>
        </view>
        <!-- 列表 -->
        <view class="list" v-if="datalist.length">
          <view class="item" v-for="(item, index) in datalist" :key="index">
            <view class="label">
              <view class="icon pt-icon-weibiaoti-"></view>
              <view class="text">
                <view class="remarks">
                  {{ item.status === '10' ? '等待审核' : '' }}
                  {{ item.status === '20' ? '审核通过' : '' }}
                  {{ item.status === '30' ? `驳回：${item.reject_reason}` : '' }}
                </view>
                <view class="time">{{ item.create_at }}</view>
              </view>
            </view>
            <view class="value">
              -{{ item.money }}
            </view>
          </view>
        </view>
        <view class="empty-container" v-else>
          <u-empty mode="list" textColor="#666" textSize="14" icon="/static/empty-new.png" />
        </view>
      </view>
    </view>
  </xh-pages>
</template>
  
<script setup lang="ts">
import type { withdrawalTypes } from "@/common/types/withdrawalTypes";
import { useSite } from "@/stores/site";
import { useUserStore } from "@/stores/user";
import { toast,openWin } from "@/utils/helpers";

const siteInfo = storeToRefs(useSite()).siteInfo
const user = storeToRefs(useUserStore()).userInfo

const formData = ref({
  money: "",
});

const datalist = ref<withdrawalTypes[]>([]);

const hanldSubmit = () => {
  uni.$u.http.post("Withdrawal/apply", formData.value).then((res: any) => {
    uni.$emit("user::update");
    toast(res?.msg || "提现成功，请等待审核", {
      success: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 2500);
      },
    });
  }).catch((err:any)=>{
    if(err.code===500){
      uni.showModal({
        title: '提示',
        content: err.msg,
        confirmText: '去设置',
        success: (res:any)=>{
          if (res.confirm) {
            openWin({
              url: '/pages/users/wallet/setting'
            })
          }
        }
      })
    }
  });
};

const initify = () => {
  uni.$u.http.get("Withdrawal/index").then((res: any) => {
    datalist.value = res.data?.data;
  });
};

onShow(() => initify());
</script>
  
<style scoped lang="scss">
.pages-container {
  .withdrawal-container {
    background: linear-gradient(to right, var(--theme-color), var(--theme-active-color));
    height: 280rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;

    .title {
      font-size: 30rpx;
    }

    .money {
      font-weight: 700;
      margin-top: 10rpx;
    }
  }

  .withdrawal-form {
    background: #fff;
    padding: 30rpx;
    margin: -60rpx 20rpx 0 20rpx;
    border-radius: 10rpx;

    .title {
      font-size: 28rpx;
      font-weight: 700;
    }

    .w-input {
      padding: 15rpx 0;
      margin-top: 40rpx;
      border-bottom: 1px solid #e5e5e5;
      font-size: 28rpx;
    }

    .withdrawal-type {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      font-size: 28rpx;
      color: #666;
    }

    .withdrawal-desc {
      margin-top: 20rpx;

      .title {}

      .withdrawal-list {
        .item {
          margin-top: 20rpx;
          font-size: 25rpx;
          color: #999;
        }
      }
    }

    .withdrawal-button {
      margin-top: 40rpx;
    }
  }

  .bill-container {
    background: #fff;
    margin: 30rpx 20rpx 0 20rpx;

    .bill-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;

      .title {
        font-weight: 700;
        color: #333;
        padding: 30rpx;
      }

      .more {
        font-size: 28rpx;
        display: flex;
        align-items: center;
        padding: 30rpx;
      }
    }

    .list {
      margin-bottom: 20rpx;

      .item {
        padding: 30rpx;
        border-top: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;

        .label {
          flex: 1;
          display: flex;
          align-items: center;

          .icon {
            font-size: 60rpx;
            padding-right: 20rpx;
          }

          .text {
            font-size: 28rpx;
            color: #666;

            .remarks {
              font-size: 28rpx;
              color: #333;
            }

            .time {
              font-size: 24rpx;
              color: #999;
            }
          }
        }

        .value {
          color: red;
          display: flex;
          align-items: center;
          font-size: 34rpx;
        }
      }
    }

    .empty-container {
      padding: 50rpx 0 100rpx 0;
      border-top: 1px solid #e5e5e5;
    }
  }
}
</style>
  